<template>
    <div class='management'>
        <el-container>
            <el-aside>
                <el-menu
                active-text-color='#7266ba'
                text-color='#E8E8E8'
                background-color='#3b3f50'
                :router='true'
                default-active='/management/'
                >
                    <el-menu-item v-for='item in menuTitleList' :index="originUrl + item.url">
                        <template #title>
                            {{item.title}}
                        </template>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
    import { ref, reactive } from "vue";
    const originUrl = '/management'
    const menuTitleList = reactive([
        {title: '站点信息', url: '/', icon: 'HomeFilled'},
        {title: '图床', url: '/picM', icon: 'Notebook'},
        {title: '文章管理', url: '/articleM', icon: 'UserFilled'}
    ])
</script>

<style lang="scss" src="@/styles/management.scss" scoped>

</style>